import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import './index.less'
import api from '../../service/api';
import WriteBox from '../../components/WriteBox';
import { AtAvatar } from 'taro-ui'
import util from '../../utils/util';


export default class DoctorOrderDetail extends Taro.Component {

  config = {
    navigationBarTitleText: '问题详情'
  }


  constructor() {
    super(...arguments)
    this.state = {
        orderDetail:{},
        time:'',
        answerTimes:''
    }
  }

  componentDidMount() {
    let params = {}
    params.orderNum = this.$router.params.orderNum
    params.role = Taro.getStorageSync('loginInfo').role

    api.get('/inquiry/find/inquiryDetail', params).then(res=>{
      if(res.data.status == '200'){
        this.setState({
          orderDetail:res.data.data
        })
      }
    })
   }


   handleImagePreview(e,i){
    const item = i.currentTarget.id
    const images = e

     Taro.previewImage({
      current:images[item],
      urls:images
     })
   }

   //判断24小时结束
   isTimeOver = (e) =>{
    let newTime = new Date().getTime()
    let endQuestionTime = new Date(e).getTime()+24*60*60*1000
    // console.log(newTime)
    // console.log(endQuestionTime)
    let isTime = null
    if(endQuestionTime - newTime > 0){
      // console.log('没过期')
      isTime = true
    }else{
      // console.log('过期了')
      isTime = false
    }
    return isTime
   }

    //倒计时
    timeIsDown = (e) => {

      /* 实时倒计时代码 */
      // setTimeout(this.timeIsDown,1000);
      // this.setState({
      //   time:util.timeDown(e)
      // })

      return util.timeDown(e).hou + '小时' + util.timeDown(e).min + '分'
    }

    userQuestionTimes(){
      let time = '1'
      let showUserBox = false
      let remainingTime = null
      let questionData = {}
      if(this.state.orderDetail.firstReplyContent !== undefined && this.state.orderDetail.secondQuestionContent == undefined){
        showUserBox = true
        remainingTime = '2'
        time = '2'
      }else if(this.state.orderDetail.secondReplyContent !== undefined && this.state.orderDetail.thirdQuestionContent == undefined){
        showUserBox = true
        remainingTime = '1'
        time = '3'
      }
      questionData.showUserBox = showUserBox
      questionData.remainingTime = remainingTime
      questionData.time = time

      return questionData
    }

    doctorReplyTimes(){
      let time = '0'
      let showDoctorBox = false
      let replyData = {}
      if(this.state.orderDetail.firstQuestionContent !== undefined &&this.state.orderDetail.firstReplyContent == undefined){
        time = '1'
        showDoctorBox = true
      }else if(this.state.orderDetail.secondQuestionContent !== undefined &&this.state.orderDetail.secondReplyContent == undefined){
        time = '2'
        showDoctorBox = true
      }else if(this.state.orderDetail.thirdQuestionContent !== undefined && this.state.orderDetail.thirdReplyContent == undefined){
        time = '3'
        showDoctorBox = true
      }
      replyData.time = time
      replyData.showDoctorBox = showDoctorBox
      return replyData
    }


  render() {

    //问题结束以后判断是否需要提示“问诊时间已结束，您需回复用户最后一个问题”
    let lastAnswer = (this.state.orderDetail.secondQuestionContent !== undefined && this.state.orderDetail.secondReplyContent == undefined ) || (this.state.orderDetail.thirdQuestionContent !== undefined && this.state.orderDetail.thirdReplyContent == undefined)

    //判断头部信息
    let headTop = null
    if(Taro.getStorageSync('loginInfo').role == 1){
      headTop = <View>
                  <Text className='list-item-name'>{this.state.orderDetail.doctorName}</Text>
                  <Text className='list-item-level'>{this.state.orderDetail.doctorTitle}</Text>
                  <View className='list-item-hospital'>
                    {this.state.orderDetail.hospital}/{this.state.orderDetail.department}
                  </View>
                </View>
    }else{
      headTop = <Text className='list-item-name'>{this.state.orderDetail.nickName}</Text>
    }


    //图片
    let img1 = []
    if(this.state.orderDetail.firstQuestionImgs !== undefined){
      img1  = JSON.parse(this.state.orderDetail.firstQuestionImgs)
    }

    let img2 = []
    if(this.state.orderDetail.secondQuestionImgs !== undefined){
      img2  = JSON.parse(this.state.orderDetail.secondQuestionImgs)
    }

    let img3 = []
    if(this.state.orderDetail.thirdQuestionImgs !== undefined){
      img3  = JSON.parse(this.state.orderDetail.thirdQuestionImgs)
    }

    let replyImg1 = []
    if(this.state.orderDetail.firstReplyImgs !== undefined){
      replyImg1  = JSON.parse(this.state.orderDetail.firstReplyImgs)
    }

    let replyImg2 = []
    if(this.state.orderDetail.secondReplyImgs !== undefined){
      replyImg2  = JSON.parse(this.state.orderDetail.secondReplyImgs)
    }

    let replyImg3 = []
    if(this.state.orderDetail.thirdReplyImgs !== undefined){
      replyImg3  = JSON.parse(this.state.orderDetail.thirdReplyImgs)
    }

    let firtImg1 = img1.map((item1,index) =>{
      return <View className='list-item-main-box' key={index} id={index} onClick={this.handleImagePreview.bind(this,img1)}>
              <Image className='list-item-main-image' src={item1}  />
            </View>
    })
    let firtImg2 = img2.map((item2,index) =>{
      return <View className='list-item-main-box' key={index} id={index} onClick={this.handleImagePreview.bind(this,img2)}>
              <Image className='list-item-main-image' src={item2} />
            </View>
    })
    let firtImg3 = img3.map((item3,index) =>{
      return <View className='list-item-main-box' key={index} id={index} onClick={this.handleImagePreview.bind(this,img3)}>
              <Image className='list-item-main-image' src={item3} />
            </View>
    })
    let doctorImg1 = replyImg1.map((reply1,index) =>{
      return <View className='list-item-main-box' key={index} id={index} onClick={this.handleImagePreview.bind(this,replyImg1)}>
              <Image className='list-item-main-image' src={reply1} />
            </View>
    })
    let doctorImg2 = replyImg2.map((reply2,index) =>{
      return <View className='list-item-main-box' key={index} id={index} onClick={this.handleImagePreview.bind(this,replyImg2)}>
              <Image className='list-item-main-image' src={reply2} />
            </View>
    })
    let doctorImg3 = replyImg3.map((reply3,index) =>{
      return <View className='list-item-main-box' key={index} id={index} onClick={this.handleImagePreview.bind(this,replyImg3)}>
              <Image className='list-item-main-image' src={reply3} />
            </View>
    })

    //显示输入框
    let showWriteBox = null
    if(Taro.getStorageSync('loginInfo').role == 1 && this.isTimeOver(this.state.orderDetail.firstReplyTime) && this.userQuestionTimes().showUserBox && this.state.orderDetail.orderStatus !== (3&&4)){
      showWriteBox = <View>
                        <View className='list-item-remain'>继续提问
                          <View className='list-item-remain-tips'>(问诊次数剩余 <Text className='list-item-remain-times'>{this.userQuestionTimes().remainingTime}</Text>次)</View>
                        </View>
                        <WriteBox sendUserId={this.state.orderDetail.doctorUserId} sendQuestionCount={this.userQuestionTimes().time} orderNum={this.state.orderDetail.orderNum}></WriteBox>
                    </View>
    }

    if(Taro.getStorageSync('loginInfo').role == 2 && this.isTimeOver(this.state.orderDetail.firstQuestionTime) && this.doctorReplyTimes().showDoctorBox && this.state.orderDetail.orderStatus !== (3&&4)){
      showWriteBox = <View>
                        <View className='list-item-remain'>
                          回复患者
                        </View>
                        <WriteBox sendUserId={this.state.orderDetail.userId} sendQuestionCount={this.doctorReplyTimes().time} orderNum={this.state.orderDetail.orderNum}></WriteBox>
                    </View>
    }else if( !this.isTimeOver(this.state.orderDetail.firstQuestionTime) && lastAnswer ){
      showWriteBox = <View>
                        <View className='list-item-remain'>
                          回复患者
                        </View>
                        <WriteBox sendUserId={this.state.orderDetail.userId} sendQuestionCount={this.doctorReplyTimes().time} orderNum={this.state.orderDetail.orderNum}></WriteBox>
                    </View>
    }

    //显示用户底部提示
    let showUserTips = null
    if(Taro.getStorageSync('loginInfo').role == 1){
      if(this.state.orderDetail.orderStatus == 1){
        showUserTips = <View className='list-order-tips'>
                          医生还未开始接诊，若24小时内无接诊，则自动退还服务次数。
                        </View>
      }else if(this.state.orderDetail.orderStatus  == 4){
        showUserTips = <View className='list-order-tips'>
                          因医生未能按时接诊，此问题已关闭，问诊服务次数将在2小时内退回。
                        </View>
      }
      else if(this.state.orderDetail.orderStatus == 2){
        showUserTips = <View className='list-order-tips'>
                          距离结束问诊还有{this.timeIsDown(this.state.orderDetail.firstReplyTime)}
                        </View>
      }
    }



    //显示医生头部提示
    let showDoctorTips = null
    //是否超24时
    let showTime = this.isTimeOver(this.state.orderDetail.firstQuestionTime)
    if(Taro.getStorageSync('loginInfo').role == 2){
      if(this.state.orderDetail.orderStatus == 1){
        showDoctorTips = <View className='top-tips'>{this.timeIsDown(this.state.orderDetail.firstQuestionTime)}未回复问诊自动关闭</View>
      }else if(this.state.orderDetail.orderStatus == 2 && showTime){
        showDoctorTips = <View className='top-tips'>距离结束问诊还有：{this.timeIsDown(this.state.orderDetail.firstReplyTime)}</View>
      }
    }

    return (
      <View className='page'>
        <View className='page-top'>
          {showDoctorTips}
          {
            Taro.getStorageSync('loginInfo').role == 2  && this.state.orderDetail.orderStatus == 2 && lastAnswer && !showTime &&
            <View className='top-tips'>问诊时间已结束，您需回复用户最后一个问题</View>
          }
        </View>
        <View className='page-main'>
          <View className='list'>
            <View className='list-item'>
              {this.state.orderDetail.orderStatus == "1" && <View className='list-item-label list-item-label-wait'>
                待接诊
              </View>
              }
              {this.state.orderDetail.orderStatus == "2" && <View className='list-item-label list-item-label-now'>
                接诊中
              </View>
              }
              {this.state.orderDetail.orderStatus == "3" && <View className='list-item-label list-item-label-finish'>
                已结束
              </View>
              }
              {this.state.orderDetail.orderStatus == "4" && <View className='list-item-label list-item-label-finish'>
                关闭
              </View>
              }
              <View className='list-item-top'>
                <View className='at-row at-row__align--center'>
                  <View className='at-col at-col-12 flex-items-center'>
                    <AtAvatar circle image={this.state.orderDetail.headImage} size='small'></AtAvatar>
                    {headTop}
                  </View>
                </View>
              </View>

              <View className='list-item-box'>
                {this.state.orderDetail.firstQuestionContent && <View className='list-item-questionbox'>
                    <View className='list-item-main'>
                      <Text className='list-item-main-times'>第一次提问</Text>{this.state.orderDetail.firstQuestionContent}
                    </View>
                    <View className='list-item-bottom'>
                      {util.formatDateTime(this.state.orderDetail.firstQuestionTime)}
                    </View>
                    <View className='list-item-main-image-list'>
                      {firtImg1}
                    </View>
                  </View>
                }
                {this.state.orderDetail.firstReplyContent && <View className='list-item-reply-box'>
                    <View className='at-row at-row__align--center'>
                      <View className='at-col at-col-12 flex-items-center'>
                      {
                          Taro.getStorageSync('loginInfo').role == 1
                          ?<View className='flex-items-center'>
                            <AtAvatar circle image={this.state.orderDetail.headImage} size='small'></AtAvatar>
                            <View>
                              <Text className='list-item-name'>{this.state.orderDetail.doctorName}</Text>
                              <Text className='list-item-reply'>回复了你的问题</Text>
                            </View>
                          </View>
                          :<View>
                            <Text className='list-item-userreply'>你回复了</Text>
                            <Text className='list-item-username'>{this.state.orderDetail.nickName}</Text>
                            <Text className='list-item-userreply'>的问题</Text>
                          </View>
                        }
                      </View>
                    </View>
                    <View className='list-item-reply-content'>
                      {this.state.orderDetail.firstReplyContent}
                      <View className='list-item-reply-content-tips'></View>
                      <View className='list-item-bottom'>
                        {util.formatDateTime(this.state.orderDetail.firstReplyTime)}
                      </View>
                      <View className='list-item-main-image-list'>
                        {doctorImg1}
                      </View>
                    </View>
                  </View>
                }
                {this.state.orderDetail.secondQuestionContent && <View>
                    <View className='list-item-main'>
                      <Text className='list-item-main-times'>第二次提问</Text>{this.state.orderDetail.secondQuestionContent}
                    </View>
                    <View className='list-item-bottom'>
                      {util.formatDateTime(this.state.orderDetail.secondQuestionTime)}
                    </View>
                    <View className='list-item-main-image-list'>
                      {firtImg2}
                    </View>

                  </View>
                  }
                  {this.state.orderDetail.secondReplyContent && <View className='list-item-reply-box'>
                    <View className='at-row at-row__align--center'>
                      <View className='at-col at-col-12 flex-items-center'>
                      {
                          Taro.getStorageSync('loginInfo').role == 1
                          ?<View className='flex-items-center'>
                            <AtAvatar circle image={this.state.orderDetail.headImage} size='small'></AtAvatar>
                            <View className='flex-items-center'>
                              <Text className='list-item-name'>{this.state.orderDetail.doctorName}</Text>
                              <Text className='list-item-reply'>回复了你的问题</Text>
                            </View>
                          </View>
                          :<View>
                            <Text className='list-item-userreply'>你回复了</Text>
                            <Text className='list-item-username'>{this.state.orderDetail.nickName}</Text>
                            <Text className='list-item-userreply'>的问题</Text>
                          </View>
                        }
                      </View>
                    </View>
                    <View className='list-item-reply-content'>
                      {this.state.orderDetail.secondReplyContent}
                      <View className='list-item-reply-content-tips'></View>
                      <View className='list-item-bottom'>
                        {util.formatDateTime(this.state.orderDetail.secondReplyTime)}
                      </View>
                      <View className='list-item-main-image-list'>
                        {doctorImg2}
                      </View>
                    </View>
                  </View>
                }
                {this.state.orderDetail.thirdQuestionContent && <View>
                      <View className='list-item-main'>
                        <Text className='list-item-main-times'>第三次提问</Text>{this.state.orderDetail.thirdQuestionContent}
                      </View>
                      <View className='list-item-main-image-list'>
                      {firtImg3}
                    </View>
                      <View className='list-item-bottom'>
                        {util.formatDateTime(this.state.orderDetail.thirdQuestionTime)}
                      </View>
                    </View>
                  }
                  {this.state.orderDetail.thirdReplyContent && <View className='list-item-reply-box'>
                    <View className='at-row at-row__align--center'>
                      <View className='at-col at-col-12 flex-items-center'>
                      {
                          Taro.getStorageSync('loginInfo').role == 1
                          ?<View className='flex-items-center'>
                            <AtAvatar circle image={this.state.orderDetail.headImage} size='small'></AtAvatar>
                            <View className='flex-items-center'>
                              <Text className='list-item-name'>{this.state.orderDetail.doctorName}</Text>
                              <Text className='list-item-reply'>回复了你的问题</Text>
                            </View>
                          </View>
                          :<View>
                            <Text className='list-item-userreply'>你回复了</Text>
                            <Text className='list-item-username'>{this.state.orderDetail.nickName}</Text>
                            <Text className='list-item-userreply'>的问题</Text>
                          </View>
                        }
                      </View>
                    </View>
                    <View className='list-item-reply-content'>
                      {this.state.orderDetail.thirdReplyContent}
                      <View className='list-item-reply-content-tips'></View>
                      <View className='list-item-bottom'>
                        {util.formatDateTime(this.state.orderDetail.thirdReplyTime)}
                      </View>
                      <View className='list-item-main-image-list'>
                        {doctorImg3}
                      </View>
                    </View>
                  </View>
                  }
              </View>

              {showWriteBox}

            </View>
          </View>
        </View>
        <View className='page-bottom'>
        {
          this.state.orderDetail.orderStatus == 2 && Taro.getStorageSync('loginInfo').role == 1 && !this.isTimeOver(this.state.orderDetail.firstReplyTime)
          ?<View className='list-order-tips list-order-tips-red'>
                提问时间已结束
            </View>
          : <View>
              {showUserTips}
            </View>
        }
        </View>
      </View>
    )
  }
}
